import { $getAccountDetail } from "@/api/userCenter/PrePaidDepositAccount/PrePaidDepositAccount";
import LIcon from "@/components/public/lIcon/lIcon";
import { defineComponent, reactive, watch } from "vue";
import styles from "./certificatePopup.module.less";
export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      isShow: false,
      imgs: [],
      account_data: '',
      type_name: '',
      from_type: '',
      remark: '',
    })

    const open = (e: any) => {
      state.isShow = true;
      console.log(e)
      $getAccountDetail({
        order_no: e.order_no
      }).then((res: any) => {
        console.log(res)
        state.account_data = res.data?.account_data || '';
        state.imgs = res.data?.voucher || [];
        state.type_name = res.data?.type_name || '';
        state.from_type = res.data?.from_type || '';
        state.remark = res.data?.remark || '';
      })
    }
    
    watch(() => state.isShow, (nv) => {
      if (!nv) {
        state.imgs = [];
      }
    })

    expose({
      open,
    })
    return () => (
      <div class={styles['certicatePopup-floating']} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles.header}>
            <span class={styles.title}>查看凭证</span>
            <div class={styles['delete-icon']} onClick={() => { state.isShow = false; }}>
              <LIcon type="icon-delete-x"></LIcon>
            </div>
          </div>
          <div class={styles.container}>
            <div class={styles['image-box']}>
              <div class={styles.label}>凭证：</div>
              <a-image-preview-group>
                {
                  state.imgs.map((item: any) => (
                    <a-image width={200} src={item}></a-image>
                  ))
                }
              </a-image-preview-group>
            </div>
          </div>
        </div>
      </div>
    )
  }
})